﻿@page "/components/table"

<DocsPage>
    <DocsPageHeader Title="Table" Component="@nameof(MudTable<T>)" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Default Table">
                <Description>
                    The default table displays your data in simple rows and is responsive, it breaks into mobile layout on <CodeInline>Breakpoint.Xs</CodeInline> unless changed.<br />
                    Add the <CodeInline>DataLabel</CodeInline> property to your <CodeInline>MudTd</CodeInline> cells to properly display the column label when the table has changed to mobile layout.<br />
                    The table can be prevented from breaking into mobile layout by setting the <CodeInline>Breakpoint</CodeInline> to <CodeInline>Breakpoint.None</CodeInline>.<br />
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableBasicExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Click Event and display for selected Row">
                <Description>
                    The <CodeInline>RowClassFunc</CodeInline> function can be used to customize the display of the selected row. <CodeInline>RowClickEvent</CodeInline> is triggered each time the row is clicked. 
                    In addition, the <CodeInline>RowClass</CodeInline> can be used to apply a general row style independent of the selection state. In this example we show a pointer cursor.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableRowClassFuncExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableRowClassFuncExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Hover Events">
                <Description>
                    <CodeInline>OnRowMouseEnter</CodeInline> is triggered when the row starts being hovered (onpointerenter event).
                    <CodeInline>OnRowMouseLeave</CodeInline> is triggered when the row stops being hovered (onpointerleave event).
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableRowHoverEventsExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableRowHoverEventsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Table with pagination and filtering">
                <Description>
                    The <CodeInline>&lt;MudTable></CodeInline> component supports pagination, sorting and filtering of rows, as well as single and multiple row selection. To tell the table how to render your data, define a <CodeInline>&lt;RowTemplate></CodeInline>
                    containing a <CodeInline>&lt;MudTableCell></CodeInline> or a <CodeInline>&lt;td></CodeInline> for every column.
                    <br /><br />
                    Note: you can not fill this table in a conventional way, i.e. by defining multiple <CodeInline Code="<tr>" /> tags. See <MudLink Href="/components/simpletable">SimpleTable</MudLink> if you want that. Instead, you
                    pass the collection of items to be displayed to the table's <CodeInline>Items</CodeInline> parameter.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="TablePager Customization">
                <Description>
                    The <CodeInline>TablePager</CodeInline> has many properties to customize it.
                    The property <CodeInline>HorizontalAlignment</CodeInline> can be used to define the position.
                    The properties <CodeInline>RowsPerPageString</CodeInline>, <CodeInline>InfoFormat</CodeInline> and <CodeInline>AllItemsText</CodeInline> can be used to customize the displayed text.
                    The properties <CodeInline>HideRowsPerPage</CodeInline>, <CodeInline>HidePageNumber</CodeInline> and <CodeInline>HidePagination</CodeInline> can be used to hide the corresponding information.
                    <br /><br />
                    See <MudLink Href="@ApiLink.GetApiLinkFor(typeof(MudTablePager))">TablePager API</MudLink> for more information.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        <CodeInline>@("RowsPerPage")</CodeInline> parameter of MudTable is independent of <CodeInline>@("PageSizeOptions")</CodeInline> parameter of PagerContent. Therefore, the RowsPerPage value does not have
                        to be one of the values in the PageSizeOptions list. If the table pager is shown you should make sure the value of RowsPerPage is also available in the PageSizeOptions list, otherwise the users can not go back to this RowsPerPage value once they have chosen another one.
                    </MudAlert>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-2">
                        Specifying <CodeInline>int.MaxValue</CodeInline> in the <CodeInline>@("PageSizeOptions")</CodeInline> will render as "All" in the Page Size dropdown. Use it when you want users to be able to show all items at once, but be careful, as this can lead to poor performance.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TablePagerExample)" ShowCode="false" Block="true" FullWidth="true">
                <TablePagerExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sorting">
                    <Description>
                        To enable sorting, add <CodeInline>&lt;MudTableSortLabel></CodeInline> to the header cells and define a function that simply returns the value which should be sorted by when sorting by the specific column.
                        You can also specify whether default ordering direction should be ascending or descending by specifying the <CodeInline>&lt;InitialDirection></CodeInline> parameter of <CodeInline>&lt;MudTableSortLabel></CodeInline>.<br />
                        Click on a header to sort the table by that column, then click to cycle through sorting directions.
                        By default, sorting directions are ascending, descending and unsorted; if you want to cycle through ascending and descending only, you need to specify the <CodeInline>&lt;AllowUnsorted></CodeInline> parameter of the <CodeInline>&lt;MudTable></CodeInline>.
                        Sorting can be allowed and disallowed on the column level with the property <CodeInline>Enabled</CodeInline>.
                    </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableSortingExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableSortingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multi-Selection">
                <Description>
                    To enable multiselection of rows using checkboxes, set <CodeInline>MultiSelection="true"</CodeInline>.<br />
                    To disable toggling the checkbox state on row-click, set <CodeInline>SelectOnRowClick="false"</CodeInline>.<br />
                    To prevent editing the current selection, set <CodeInline>SelectionChangeable="false"</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableMultiSelectExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableMultiSelectExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Cell Class">
                <Description>
                    If you want to apply a particular style to all the cells in the table define a CSS class and use it in the <CodeInline>CellClass</CodeInline> parameter. 
                    Separate multiple classes with spaces.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableCellClassExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableCellClassExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Fixed header and footer">
                <Description>
                    Set <CodeInline>FixedHeader="true"</CodeInline> to make the header sticky when scrolling the table.<br />
                    The same for <CodeInline>FixedFooter="true"</CodeInline> to show the footer even when the table is not scrolled all the way down.<br />
                    The table will scroll if you constrain its height using <CodeInline>Height="400px"</CodeInline>, for instance.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableFixedHeaderExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableFixedHeaderExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Column Group and Text Alignment">
                <Description>
                    Specifies a group of one or more columns in a table for formatting.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableColGroupExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableColGroupExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Inline Edit Mode">
                <Description>
                    Provides input elements for Selected Row. A click on a row makes the row editable.
                    A Cancel button appears and can be used if <CodeInline>CanCancelEdit="true"</CodeInline>.
                    In this case, the <CodeInline>RowEditPreview</CodeInline> and <CodeInline>RowEditCancel</CodeInline> methods must be defined to save and retrieve the initial values of the edited item.
                    <CodeInline>RowEditCommit</CodeInline> method can be used to handle the commit of the item.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableInlineEditExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableInlineEditExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Server Side Filtering, Sorting and Pagination">
                <Description>
                    Set <CodeInline>ServerData</CodeInline> to load data from the backend that is filtered, sorted and paginated. The table will call this async function whenever the user navigates
                    the pager or changes sorting by clicking on the sort header icons. In this example, we also show how to force the table to update when the search textfield blurs, so that the table reloads server-filtered data.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        Note: with a <CodeInline>ServerData</CodeInline> func you don't need <CodeInline>Items</CodeInline> and <CodeInline>Filter</CodeInline>.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableServerSidePaginateExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableServerSidePaginateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Server Side Data With Cancellation">
                <Description>
                    Use the <CodeInline>CancellationToken</CodeInline> to detect when a request for data has been superseded by a new request. By forwarding the token to methods which support it,
                    such as common <CodeInline>HttpClient</CodeInline> or <CodeInline>DbContext</CodeInline> methods, the table can perform well even with frequent updates.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        Note: When using <CodeInline>ServerData</CodeInline>, you don't need <CodeInline>Items</CodeInline> or <CodeInline>Filter</CodeInline>.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableServerSideCancellationTokenExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableServerSideCancellationTokenExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Loading Content">
                <Description>
                    Use <CodeInline>LoadingContent</CodeInline> to define what is shown when data is loading and no rows are currently available.
                    This renders inside a single table row with one spanning cell, which makes it simple for messages or placeholders but not suitable for simulating multiple rows or columns.
                    <br><br>
                    For more complex layouts, use <CodeInline>LoadingContentBody</CodeInline>.
                    This renders directly in the table body and gives you full control to create rows and columns (e.g., with <CodeInline>MudTr</CodeInline> and <CodeInline>MudTd</CodeInline>), without affecting the loading animation itself.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableServerSidePaginateBodyExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableServerSidePaginateBodyExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Record Type Support">
                <Description>
                    By default, mutable <CodeInline>record</CodeInline> types do not work with multi-selection or editing. This is due to the way record equality works. To support multi-selection or editing of records in a <CodeInline>MudTable</CodeInline>,
                    you must define a custom <CodeInline>Comparer</CodeInline> that implements <CodeInline>IEqualityComparer&lt;T&gt;</CodeInline>.
                    The example below demonstrates multi-selection and paging while modifying a <CodeInline>record</CodeInline> type on <CodeInline>SelectedItemsChanged</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableRecordComparerExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableRecordComparerExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Header and Footer">
                <Description>
                    By default, you can put a list of <CodeInline>&lt;MudTh></CodeInline> inside <CodeInline>&lt;HeaderContent></CodeInline> and <CodeInline>&lt;MudTd></CodeInline> inside <CodeInline>&lt;FooterContent></CodeInline>, MudTable will automatically manage the table row for you, including the select-all column and adding an empty column for editable tables.<br />
                    If you need to customize the behavior, as well as rendering multiple header or footer rows, you can set the <CodeInline>CustomHeader</CodeInline> and <CodeInline>CustomFooter</CodeInline> attributes to true.<br />
                    Then setting a list of <CodeInline>&lt;MudTHeadRow></CodeInline> or <CodeInline>&lt;MudTFootRow></CodeInline> with their respective cells will render exactly what's required inside the table header and footer.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        Note: Unless you specify the attribute <CodeInline>@nameof(MudTr.Checkable)</CodeInline> for a specific row, MudTable won't render a checkbox in case of a multi-selection table.
                        Attributes <CodeInline>IgnoreCheckbox</CodeInline> and <CodeInline>IgnoreEditable</CodeInline> won't render an empty cell either, requiring you to do it manually (for example for a colspan on the entire row).
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableHeaderAndFooterExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableHeaderAndFooterExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Table with related data">
                <Description>
                    Making use of the <CodeInline>&lt;ChildRowContent&gt;</CodeInline> allows more control over the layout for scenarios such as showing the related address data for each person below.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableRelationalExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableRelationalExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Horizontal Scrolling">
                <Description>
                    If too many columns are displayed, setting <CodeInline>HorizontalScrollbar="true"</CodeInline> will allow the user to scroll the content horizontally.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableHorizontalScrollExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableHorizontalScrollExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Table Virtualization">
                <Description>
                    You can virtualize the results of a table to increase rendering speed.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableVirtualizationExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableVirtualizationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Programmatic Scroll & Focus">
                <Description>
                    The MudTable component provides methods to programmatically control scrolling to specific items and focusing on individual cells. <br /> 
                    These methods are accessible via a <CodeInline>@("@ref")</CodeInline> to the table instance.<br /><br />
                    <MudText Typo="Typo.subtitle2" Inline>Scroll To Item</MudText> - Scrolls the table to bring the specified data item (row) into view. This is useful for navigating to a specific item in a large or virtualized table.<br />
                    <MudText Typo="Typo.subtitle2" Inline>Focus Cell</MudText> - Scrolls to the row corresponding to the specified data item and sets focus to a specific cell within that row.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableScrollFocusExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableScrollFocusExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grouping (Basic)">
                <Description>
                    Displays items in a grouped way, with Header and Footer by every group, allowing summaries on both.<br />
                    NOTE: Grouping and Virtualization should not be used together.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableBasicGroupingExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableBasicGroupingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grouping (Basic) - Initially collapsed">
                <Description>
                    Displays items in a grouped way, but the groups are all collapsed by default. <br />
                    Groups can be expanded or collapsed all at once by calling <CodeInline>ExpandAllGroups()</CodeInline> or <CodeInline>CollapseAllGroups()</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableBasicGroupingInitiallyCollapsedExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableBasicGroupingInitiallyCollapsedExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Grouping (Multi Levels)">
                <Description>
                    Displays items recursively grouped.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableMultiGroupingExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableMultiGroupingExample />
            </SectionContent>
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Accessibility">
                <Description>
                    Set the <CodeInline>AriaLabel</CodeInline> parameter to provide an accessible name for the HTML <CodeInline>&lt;table&gt;</CodeInline> element. This helps screen readers announce the purpose of the table.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(TableAriaLabelExample)" ShowCode="false" Block="true" FullWidth="true">
                <TableAriaLabelExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>



